<!DOCTYPE html>
<html>
<head>
    {{template "header"}}
</head>
<body>
<script>

    webix.ready(function () {
        let tableid = webix.uid().toString()
        let queryid = webix.uid().toString()
        let reloadData = wxui.reloadDataFunc(tableid, "/admin/oplog/query", queryid)
        let showLog = function (id, node) {
            let ditem = $$(tableid).getItem(id)
            webix.ui({
                view: "popup", height: 360, width: 520, scroll: "auto", body: {
                    view: "template", css: "log-template", template: ditem.opt_desc
                }
            }).show(node)
        }
        webix.ui({
            css:"main-panel",
            padding:7,
            rows: [
                wxui.getPageToolbar({
                    title: "Operation log",
                    icon: "mdi mdi-file-document",
                    elements: [
                    ],
                }),
                wxui.getTableQueryCustomForm(queryid, [
                    {
                        cols: [
                            {
                                view: "datepicker",
                                timepicker: true,
                                name: "starttime",
                                label: gtr("Time From"),
                                labelWidth: 80,
                                width:240,
                                stringResult: true,
                                format: "%Y-%m-%d %H:%i",
                                css: "nborder-input",
                                value: webix.Date.add(new Date(), -8, "hour"),
                                editable: true
                            },
                            {
                                view: "datepicker",
                                timepicker: true,
                                name: "endtime",
                                label: gtr("to"),
                                labelWidth: 20,
                                stringResult: true,
                                format: "%Y-%m-%d %H:%i",
                                css: "nborder-input",
                                value: new Date(),
                                editable: true
                            },
                            {view: "search", id: "keyword", name: "keyword", placeholder: "keywords", width: 320},
                            {
                                view: "button",
                                label: "Query",
                                css: "webix_transparent",
                                type: "icon",
                                icon: "mdi mdi-search-web",
                                borderless: true,
                                width: 100,
                                click: function () {
                                    reloadData()
                                }
                            }, {}
                        ]
                    }
                ]),
                wxui.getDatatable({
                    tableid: tableid,
                    url: '/admin/oplog/query',
                    columns: [
                        {id: "opr_name", header: [tr("opr","Operator")], width: 160,},
                        {id: "opt_time", header: [gtr("Time")], width: 260,},
                        {
                            id: "opt_desc",
                            header: [gtr("Message")],
                            template: "<a class='do_detail' href='javascript:void(0)'><i class='mdi mdi-eye' style='color: blue'></i></a> #opt_desc#",
                            fillspace: true
                        }
                    ],
                    leftSplit: 1,
                    pager: true,
                    on: {
                        onItemDblClick: function (id, e, node) {
                            showLog(id, node)
                        }
                    },
                    onClick: {
                        "do_detail": function (e, id, node) {
                            showLog(id, node)
                        }
                    }
                }),
                wxui.getTableFooterBar({
                    tableid: tableid,
                    actions: [
                    ],
                    callback: reloadData
                }),
            ]
        })
    })
</script>
</body>
</html>